<template>
  <div class="show-window">
    <div class="outside-container">
      <div class="product-code-show">
        <!--产品编码表展示-->
        <h2 style="text-align: center">产品编码表</h2>
        <div div class="search">
          <el-row class="el-row1">
            <!--操作栏-->
            <el-col :span="2">
              <el-tooltip class="button1" content="删除已选中" placement="top">
                <el-button
                  @click="delSelected()"
                  icon="el-icon-delete-solid"
                ></el-button>
              </el-tooltip>
            </el-col>

            <el-col :span="2">
              <el-tooltip
                class="add-button"
                content="新增产品编码"
                placement="top"
              >
                <el-button
                  @click="addButton"
                  icon="el-icon-circle-plus"
                ></el-button>
              </el-tooltip>
            </el-col>
            <el-col :span="10">
              <el-input placeholder="请输入商品编码" v-model="inputSearch">
              </el-input>
            </el-col>

            <el-col :span="2" class="el">
              <el-button
                @click="selectLikeName"
                type="primary"
                title="搜索"
                icon="el-icon-search"
              ></el-button>
            </el-col>

            <el-col :span="2" class="close-butoon1">
              <el-button
                @click="closeCodeTable"
                type="primary"
                title="关闭"
                icon="el-icon-error"
              ></el-button>
            </el-col>
          </el-row>
        </div>

        <el-table
          class="table"
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column label="全选" type="selection" width="160" align="center">
        <input type="checkbox">

      </el-table-column> -->
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>

          <el-table-column
            prop="number"
            label="序号"
            width="60"
            align="center"
            type="index"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="商品类别"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="coding"
            label="商品编码"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="商品名称"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="provider"
            label="供应商"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="colour"
            label="成色"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="stone" label="石料" width="120" align="center">
          </el-table-column>
          <el-table-column prop="style" label="款式" width="100" align="center">
          </el-table-column>
          <el-table-column prop="weight" label="重量" width="80" align="center">
          </el-table-column>
          <el-table-column
            prop="count"
            label="库存计算"
            width="80"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="price"
            label="成本价"
            width="80"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="saleprice"
            label="销售价"
            width="80"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                class="edit"
                @click="handleEdit(scope.$index, scope.row)"
                type="text"
                size="small"
                >编辑</el-button
              >

              <el-button
                class="delete"
                type="text"
                size="small"
                @click="deleteRowCode(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!--分页-->
        <!-- <el-pagination class="pagination"
      background
      layout="prev, pager, next"
      :page-size="3"
      :total="tableData.length">
    </el-pagination> -->

        <!--分页-->
        <div class="block">
          <el-pagination
            class="pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-size="5"
            layout="total, prev, pager, next"
            :total="tableData.length"
          >
          </el-pagination>
        </div>
      </div>

      <!-- 新增产品编码模块 -->
      <AddCodeWindow class="add-new-code" ref="addcodewindow" />

      <!-- 编辑当前产品编码模块 -->
      <EditCodeWindow
        class="edit-newgoods-code"
        ref="editcodewindow"
        :tableData3="this.tableData3"
      />
    </div>
  </div>
</template>

<script>
import AddCodeWindow from '@/components/goodsset/AddCodeWindow.vue'
import EditCodeWindow from '@/components/goodsset/EditCodeWindow.vue'
import { getCodeList } from '../../http/api'
import { deleteCode } from '../../http/api'
import { selectLikeCoding } from '../../http/api'
import { getPageList } from '../../http/api'


export default {
  components: {
    AddCodeWindow,
    EditCodeWindow,
  },

  created() {
    this.getCodeList()
    getPageList()
  },
  data() {
    return {
      currentPage1: 1,

      tableData3: {},
      tableData: [
        {
          type: '镶金类',
          coding: '123',
          name: '周大生珠宝',
          provider: '浙商公司',
          colour: '18K金',
          stone: '纯金',
          style: '项链',
          weight: '10',
          count: '计算',
          price: '10',
          saleprice: '20',
        },
        {
          type: '镶金类',
          coding: '123',
          name: '周大生珠宝',
          provider: '浙商公司',
          colour: '18K金',
          stone: '纯金',
          style: '项链',
          weight: '10',
          count: '计算',
          price: '10',
          saleprice: '20',
        },
        {
          type: '镶金类',
          coding: '123',
          name: '周大生珠宝',
          provider: '浙商公司',
          colour: '18K金',
          stone: '纯金',
          style: '项链',
          weight: '10',
          count: '计算',
          price: '10',
          saleprice: '20',
        },
        {
          type: '镶金类',
          coding: '123',
          name: '周大生珠宝',
          provider: '浙商公司',
          colour: '18K金',
          stone: '纯金',
          style: '项链',
          weight: '10',
          count: '计算',
          price: '10',
          saleprice: '20',
        },
        {
          type: '镶金类',
          coding: '123',
          name: '周大生珠宝',
          provider: '浙商公司',
          colour: '18K金',
          stone: '纯金',
          style: '项链',
          weight: '10',
          count: '计算',
          price: '10',
          saleprice: '20',
        },
      ],
      delbyid: [],
      inputSearch: '',
    }
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    //   console.log(this.multipleSelection);

    // },

    getCodeList() {
      getCodeList()
        .then((res) => {
          this.tableData = res.data.value.data
          console.log(res)
        })
        .catch((err) => {
          console.log('接口调用失败', err)
        })
    },

    deleteRowCode(row) {
      this.$confirm('是否确认删除本行信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          console.log(row.id)
          var delbyid = []
          delbyid.push(row.id)

          //删除当前行信息请求
          deleteCode(delbyid)
            .then((value) => {
              console.log('删除成功', value.msg)
              // 删除后重新发送获取列表的请求
              this.getCodeList()
              console.log(delbyid)
            })
            .catch((err) => {
              console.log('删除失败', err)
              console.log(row.id)
              console.log(delbyid)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },

    // 批量删除
    handleSelectionChange(val) {
      let sum = val
      console.log(sum, sum.length)
      var multipleSelection = []
      multipleSelection = sum.map(function (item) {
        return item.id
      })
      console.log(multipleSelection)
      window.multipleSelection = multipleSelection
    },
    delSelected() {
      deleteCode(window.multipleSelection)
      this.$confirm('是否确认删除选中行信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // .then((value)=>{
        //   console.log('删除成功',value.msg)
        // 删除后重新发送获取列表的请求
        this.getCodeList()

        this.$message({
          type: 'success',
          message: '删除成功!',
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
      })
    },

    showProductCode() {
      let a = document.getElementsByClassName('product-code-show')[0]
      a.style.display = 'block'
    },
    closeCodeTable() {
      let a = document.getElementsByClassName('product-code-show')[0]
      a.style.display = 'none'
    },
    addButton() {
      let a = document.getElementsByClassName('outside-container')[0]
      let b = document.getElementsByClassName('add-newgoods-code')[0]
      a.style.transform = 'translateX(-1450px)'
      a.style.transition = 'all 1s'
      b.style.display = 'block'
    },
    editButton() {
      let a = document.getElementsByClassName('outside-container')[0]
      let b = document.getElementsByClassName('edit-newgoods-code')[0]
      a.style.transform = 'translateX(-1450px)'
      a.style.transition = 'all 1s'
      b.style.display = 'block'
    },

    //搜索关键字展示信息
    selectLikeName() {
      let data = new Object()
      data.coding = this.inputSearch
      selectLikeCoding(data)
        .then((res) => {
          this.tableData = res.data.value.data
          console.log(data)
          console.log('接口调用成功', res)
        })

        .catch((err) => {
          console.log('接口调用失败', err)
        })
    },

    //编辑当前行信息
    handleEdit(index, row) {
      console.log(index, row)
      this.editButton()

      this.$refs.editcodewindow.ruleForm = row
    },

    //分页展示数据
    handleSizeChange(val) {
    console.log(`每页 ${val} 条`)
  },
    handleCurrentChange(val) {
    console.log(`当前页: ${val}`)
    var data=new Object()
    data.page=String(val)
    data.size="5"
    getPageList(data)
    .then(res=>{
      console.log(res)
    })
    .catch(err=>{
      console.log(err)
    })
    
  },
  },

  

}
</script>


<style scope>
.edit {
  width: 50px;
  color: whitesmoke;
  background-color: #18bb9c;
}
.delete {
  width: 50px;
  color: whitesmoke;
  background-color: #f66c6c;
}
.search {
  width: 700px;
  margin-bottom: 10px;
  /* border: 1px solid red; */
  margin-left: 30px;
}
.table {
  position: relative;
  box-sizing: border-box;
  margin-left: 30px;
}

.button1 {
  border: none;
  color: whitesmoke;
  background-color: #f66c6c;
}
.add-button {
  border: none;
  color: whitesmoke;
  background-color: #18bb9c;
}
.show-window {
  width: 1400px;
  height: 500px;
  min-width: 1400px;
  /* border: 1px solid red; */
  /* overflow: hidden; */
  position: relative;
}
.outside-container {
  width: 3000px;
  height: 500px;
}
.product-code-show {
  /* border: 3px solid black; */
  width: 1397px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
}
.add-new-code {
  width: 1000px;
  height: 500px;
  /* background-color: cadetblue; */
  /* border: 2px solid blue; */
  position: absolute;
  top: 0;
  left: 1450px;
}
.edit-newgoods-code{
  width: 1000px;
  height: 500px;
  /* background-color: cadetblue; */
  /* border: 2px solid blue; */
  position: absolute;
  top: 0;
  left: 1450px;
}
.pagination {
  margin-left: 30px;
}
</style>